@mixin quadrangle($color, $size, $width) {
  background: linear-gradient(to top, $color, $color) left top no-repeat,
    //上左
    linear-gradient(to right, $color, $color) left top no-repeat,
    //左上
    linear-gradient(to left, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to bottom, $color, $color) right top no-repeat,
    //上右
    linear-gradient(to left, $color, $color) left bottom no-repeat,
    //下左
    linear-gradient(to bottom, $color, $color) left bottom no-repeat,
    //左下
    linear-gradient(to top, $color, $color) right bottom no-repeat,
    //下右
    linear-gradient(to left, $color, $color) right bottom no-repeat; //右下
  background-size: $width $size, $size $width, $width $size, $size $width;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: SourceHanSansSC;
  // --search-box-gap: 16px;
  // --search-forms-gap: 16px;
  // --search-buttons-gap: 16px;
  // .teleport-area {
  //   position: absolute;
  //   right: 0;
  //   top: 50%;
  //   transform: translateY(-50%);
  // }
  // .search-box {
  //   display: flex;
  //   align-items: center;
  //   gap: var(--search-box-gap);
  //   .search-forms {
  //     display: flex;
  //     align-items: center;
  //     gap: var(--search-forms-gap);
  //   }
  //   .search-buttons {
  //     display: flex;
  //     align-items: center;
  //     gap: var(--search-buttons-gap);
  //   }
  // }
  // &.light-container {
  //   background: #fff;
  //   --search-box-gap: 16px;
  //   --search-forms-gap: 16px;
  //   --search-buttons-gap: 16px;
  //   .search-box {
  //     .n-input.search {
  //       --n-height: 32px !important;
  //       --n-color: rgba(255, 255, 255, 0.2) !important;
  //       --n-color-focus: rgba(255, 255, 255, 0.2) !important;
  //       backdrop-filter: blur(18px);
  //     }
  //     .n-upload-trigger .n-button {
  //       --n-color: rgba(255, 255, 255, 0.2) !important;
  //     }
  //     .n-button--color {
  //       box-shadow: 0px 3px 8px 0px rgba(109, 97, 227, 0.47);
  //       font-weight: 200 !important;
  //     }
  //   }
  //   .my-btn-group {
  //     width: 100%;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     gap: 8px;
  //     .n-button {
  //       width: 88px;
  //       height: 32px;
  //       &:not(.n-button--color) {
  //         // --n-text-color: #060312 !important;
  //         --n-border: 1px solid #e7eaf0 !important;
  //       }
  //     }
  //   }
  //   .groupLabel {
  //     display: flex;
  //     align-items: center;
  //     gap: 8px;
  //     height: 40px;
  //     line-height: 24px;
  //     box-sizing: border-box;
  //     padding: 8px 16px;
  //     border-radius: 4px;
  //     background: #f4f5f7;
  //     color: #140d35;
  //     font-size: 16px;
  //     font-weight: bold;
  //     margin-bottom: 20px;
  //     &::before {
  //       content: '';
  //       display: block;
  //       width: 2px;
  //       height: 16px;
  //       background: #6d61e3;
  //     }
  //   }
  //   .my-card {
  //     width: 100%;
  //     background: #ffffff;
  //     border-radius: 6px;
  //     border: 4px solid #e7eaf082;
  //     box-sizing: border-box;
  //     padding: 12px;
  //   }
  //   .n-select {
  //     .n-base-selection--disabled {
  //       .n-base-suffix__arrow {
  //         color: #9ba4b2 !important;
  //       }
  //     }
  //   }
  // }
  // &.deep-container {
  //   background: #0912190a url(/src/assets/images/deep-bg.png) center/cover no-repeat;
  //   --search-box-gap: 20px;
  //   --search-forms-gap: 12px;
  //   --search-buttons-gap: 8px;
  //   .search-box {
  //     .n-input.search {
  //       --n-border-radius: 0 !important;
  //       --n-border: 1px solid #2ba1ff80 !important;
  //       height: 34px !important;
  //       @include quadrangle(#2ba1ff80, 5px, 2px);
  //       .n-input__state-border {
  //         display: none;
  //       }
  //       .n-input__border {
  //         width: calc(100% - 2px);
  //         height: calc(100% - 2px);
  //         margin: auto;
  //       }
  //       // .n-base-clear__clear {
  //       //   .n-base-icon {
  //       //     display: block;
  //       //     background: radial-gradient(circle at center, red 0, red 50%, transparent 50%);
  //       //     color: #2ba1ff;
  //       //   }
  //       // }
  //     }
  //     .n-upload-trigger .n-button {
  //       --n-text-color: #2ba1ff !important;
  //       --n-padding: 0 16px !important;
  //       --n-icon-margin: 0 4px 0 0 !important;
  //       height: 38px !important;
  //       width: 80px !important;
  //       background: url(@/assets/images/deep-btn-bg.png) center/contain no-repeat !important;
  //       .n-button__border,
  //       .n-button__state-border {
  //         display: none;
  //       }
  //     }
  //     .n-button--color {
  //       height: 38px !important;
  //       background: url(@/assets/images/deep-solid-btn-bg.png) center/contain no-repeat !important;
  //       font-weight: 200 !important;
  //       &.big {
  //         background: url(@/assets/images/deep-solid-btn-bg-big.png) center/contain no-repeat !important;
  //       }
  //     }
  //   }
  //   .my-btn-group {
  //     width: 100%;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     gap: 8px;
  //     .n-button {
  //       width: 88px;
  //       height: 32px;
  //       &:not(.n-button--color) {
  //         // --n-text-color: #060312 !important;
  //         --n-border: 1px solid #2ba1ff !important;
  //       }
  //     }
  //   }
  //   .groupLabel {
  //     display: flex;
  //     align-items: center;
  //     gap: 8px;
  //     height: 40px;
  //     line-height: 24px;
  //     box-sizing: border-box;
  //     padding: 8px 16px;
  //     border-radius: 4px;
  //     background: #2ba1ff26;
  //     color: #fff;
  //     font-size: 16px;
  //     font-weight: bold;
  //     margin-bottom: 20px;
  //     &::before {
  //       content: '';
  //       display: block;
  //       width: 2px;
  //       height: 16px;
  //       background: #2ba1ff;
  //     }
  //   }
  //   .my-card {
  //     width: 100%;
  //     background: rgba(0, 27, 46, 0.2);
  //     border: 1px solid rgba(36, 135, 220, 0.3);
  //     box-sizing: border-box;
  //     padding: 12px;
  //     color: #ffffff99;
  //     color: #fff;
  //   }
  //   .n-select {
  //     .n-base-selection--disabled {
  //       .n-base-suffix__arrow {
  //         color: #ffffff99 !important;
  //       }
  //     }
  //   }
  //   .n-radio {
  //     &.n-radio--checked {
  //       .n-radio__label {
  //         color: #fff !important;
  //       }
  //     }
  //   }
  //   .n-dialog--closable {
  //     border: 1px solid rgba(49, 152, 227, 0.5);
  //     box-shadow: inset 0px 0px 110px 0px #0069bd;
  //     .n-dialog__title {
  //       height: 48px;
  //       background-color: rgba(43, 161, 255, 0.16);
  //       padding: 0 20px;
  //       color: #fff;
  //     }
  //     .n-dialog__action {
  //       justify-content: center;
  //       .n-button {
  //         --n-height: 32px !important;
  //         --n-width: 88px !important;
  //         --n-border-radius: 0 !important;
  //         --n-border: 1px solid #2ba1ffcc !important;
  //       }
  //     }
  //     .n-dialog__close {
  //       background: url(@/assets/images/deep-dialog-close.png) no-repeat;
  //       background-size: 24px;
  //       .n-base-icon {
  //         opacity: 0;
  //       }
  //       &::before {
  //         display: none;
  //       }
  //     }
  //   }
  // }
  .n-drawer {
    .n-drawer-content {
      .n-drawer-header {
        line-height: 24px;
      }
    }
  }
}

#app {
  width: 100%;
  height: 100%;
}

/* transition fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 自定义滚动条样式 */
.cus-scroll {
  overflow: auto;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}
.cus-scroll-x {
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }
}
.cus-scroll-y {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 8px;
    height: 0;
  }
}
.cus-scroll,
.cus-scroll-x,
.cus-scroll-y {
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }
  }
}

.n-config-provider {
  width: 100%;
  height: 100%;
}
.n-input--textarea:has(.n-input-word-count) {
  padding-bottom: 30px;
}
.n-checkbox-box__border,
.n-base-selection__state-border,
.n-input__state-border,
.n-switch__rail {
  box-shadow: none !important;
}
